<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to awdplaform</title>
    <link type="text/css" rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="/static/js/jquery.validate/jquery.validate.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/jquery.validate/jquery.validate.min.js"></script>
    <style>
        .row-margin-top {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container" style="width:420px;padding-top:10px;">
        <div class="row">
            <div class="jumbotron">
                <h1>LOGIN IN </h1>
                <p>Welcome to awdplaform</p>
            </div>
        </div>
        <div class="row">
            <div class="center">
                <form action={{url_for("login")}} method="POST" role="form">
                    <p style="color:red;">{{error}}</p>
                    <p style="color:green;">{{right}}</p>
                    <div class="form-group">
                        <label for="InputUser">User Name</label>
                        <input type="text" class="form-control" name="username" id="username" placeholder="username" >
                    </div>
                    <div class="form-group">
                        <label for="InputPassword">Password</label>
                        <input type="password" class="form-control"  name="password" id="password" placeholder="password">
                    </div>
                    <button type="submit" class="btn btn-default">Login</button>
                    <!--
                    <button type="button" onclick="location.replace('/register')" class="btn btn-link">Register</button>
                    -->
                </form>
            </div>
        </div>
    </div>
    <script>
        $( "form" ).validate({
        rules: {
            username: {
                 required: true
               },
            password: {
                 required: true
               },
            }
       });
    </script>

</body>
</html>